<template>
  <div class="article-list">
    <van-pull-refresh 
        :success-text="refreshSuccessText"
        :finished-text="loadFinshText"
        success-duration='1500'

      v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
        <van-cell  
        v-for="(article,index) in articleList" 
        :key="index" 
        :to="{
          name: 'Article',
          params: {
            articleId: article.art_id
          }
        }"
        >
          <article-item @showReportPopup="showPopup" :article="article"></article-item>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <van-overlay :show="show" @click="show = false" >
          <div class="wrapper" >
            <div class="block" >
              <van-cell title="不感兴趣" @click.stop="disLikeArticle" />
              <van-cell title="反馈垃圾内容" @click.stop="showMenuList" is-link />
              <van-cell title="拉黑作者" @click.stop="blacklistUser" />
            </div>
          </div>
    </van-overlay>

    <!-- 二级菜单 -->
    <van-overlay :show="showMenu" @click="showMenu = false" >
          <div class="wrapper-menu" >
            <div class="block-menu" >
              <van-cell title="返回" icon="arrow-left"  @click="goBack"></van-cell>
              <van-cell v-for="(item,index) in selectList" @click="reportArticle(index)" :key="index" :title="item" />
            </div>
          </div>
    </van-overlay>
  </div>
</template>

<script>
import { getArticles,defriendArticle,reportsArticle} from '@/api/article'
import ArticleItem from '@/views/home/components/articleItem'
export default {
  name: "Articlelist",
  components:{
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      articleList: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: null,
      loadFinshText: '',
      refreshSuccessText:'',
      show: false,
      currentArticle: {},
      showMenu: false,
      selectList:['其他问题','标题夸张','低俗色情','错别字多','旧闻重复','广告软文','内容不实','涉嫌违法犯罪','侵权']
    };
  },

  mounted() {},
  methods: {
     async onLoad() {
        const loadRes = await getArticles({
          channel_id:this.channel.id,
          timestamp: this.timestamp || Date.now(),
          with_top: 1
        })
        // console.log(loadRes)
        const { data } = loadRes.data
        this.articleList.push(...data.results)
        this.timestamp = data.pre_timestamp
        this.loading = false
        if(data.results.length === 0){
          this.finished = true
          this.loadFinshText = '没有更多了'
        }
        // this.loading = false
    },
    async onRefresh() {
      this.refreshSuccessText = ''
      const loadRes = await getArticles({
          channel_id:this.channel.id,
          timestamp: Date.now(),
          with_top: 1
        })
        // console.log(loadRes)
        const { data } = loadRes.data
        this.articleList.unshift(...data.results)
        this.refreshSuccessText = `刷新了${data.results.length}条数据`
        this.refreshing = false
    },
    showPopup (article) {
      this.show = true
      this.currentArticle = article
    },
    // 拉黑文章 
    async disLikeArticle (){
        try {
          const {data} = await defriendArticle(this.currentArticle.art_id) 
          if (data) {
             this.articleList.splice(this.articleList.indexOf(this.currentArticle),1)
             this.show = false
             this.$toast.success('操作成功')
          }
         
        } catch (error) {
          console.log(error)
        }
    },
    showMenuList () {
      this.show = false
      this.showMenu = true
    },
    goBack () {
      this.show = true
      this.showMenu = false
    },
    async reportArticle (index) {
      console.log(index)
      const { data } = await reportsArticle(this.currentArticle.art_id,index)
      console.log(data)
      if(data) {
        this.articleList.splice(this.articleList.indexOf(this.currentArticle),1)
        this.showMenu = false
        this.$toast.success('操作成功')
      }
    },
  },
};
</script>

<style lang="less" scoped>
.article-list{
    position: fixed;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 50px;
    overflow-y: auto;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 290px;
    height: 127px;
    background-color: #fff;
  }
  .wrapper-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block-menu {
    width: 290px;
    height: 425px;
    background-color: #fff;
  }
</style>